<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="checkbox" id="all">
    <br>
    <input type="checkbox" class="one">
    <input type="checkbox" class="one">
    <input type="checkbox" class="one">

    <script>

        var oAll = document.getElementById('all') ;
        var oOnes = document.getElementsByClassName('one') ;   // 伪数组

        // 全选
        oAll.onclick = function() {
            // 如果全选选中
            // if(this.checked) {
            //     // oOnes[0].checked = true ;
            //     // oOnes[1].checked = true ;
            //     // oOnes[2].checked = true ;
            //     for(var i = 0 ; i < oOnes.length ; i++) {
            //         oOnes[i].checked = true ;
            //     }
            // }
            // else {
            //     for(var i = 0 ; i < oOnes.length ; i++) {
            //         oOnes[i].checked = false ;
            //     } 
            // }

            for(var i = 0 ; i < oOnes.length ; i++) {
                // oOnes[i].checked =  true / false ;
                oOnes[i].checked = oAll.checked ;
            } 
        }


        // 反选
        // oOnes[0].onclick = function() {
        //     // 把所有的单选都判断一遍，全部选中全选就选中
        //     // if(oOnes[0].checked && oOnes[1].checked && oOnes[2].checked) {
        //     //     oAll.checked = true ;
        //     // }


        //     // 假设法
        //     var flag = true ;
        //     for(var i = 0 ; i < oOnes.length ; i++) {
        //         if(!oOnes[i].checked) {
        //             flag = false ;
        //             break ;
        //         }
        //     }
        //     // if(flag === true) {
        //     //     oAll.checked = true ;
        //     // } else {
        //     //     oAll.checked = false 
        //     // }
        //     console.log(flag);
        //     oAll.checked = flag ;
        // }   








        // 循环绑定事件
        // for(var i = 0 ; i < oOnes.length ; i++) {
        //     oOnes[i].onclick = function() {
        //         var flag = true ;
        //         for(var i = 0 ; i < oOnes.length ; i++) {
        //             if(!oOnes[i].checked) {
        //                 flag = false ;
        //                 break ;
        //             }
        //         }
        //         oAll.checked = flag ;
        //     }
        // }



        for(var i = 0 ; i < oOnes.length ; i++) {
            oOnes[i].onclick = function() {
            
                for(var i = 0 ; i < oOnes.length ; i++) {
                    if(!oOnes[i].checked) {   // 如果没有选中
                        break ;
                    }
                }
                // if(i < oOnes.length) {
                //     oAll.checked = false ;
                // } else {
                //     oAll.checked = true ;
                // }
                // i < oOnes.length ? oAll.checked = false : oAll.checked = true ;
                // oAll.checked = i < oOnes.length ? false : true ;


                // oAll.checked = i === oOnes.length ? true : false ;
                oAll.checked = (i === oOnes.length) ;
            }
        }


    </script>
    
</body>
</html>